// 基础表格

import {Fragment, forwardRef, useImperativeHandle, useState} from "react";
import {Table, Button, Space, Alert} from "antd";
import type {PaginationProps} from 'antd';
import type {ColumnsType, TablePaginationConfig} from "antd/es/table";
import type {FilterValue, SorterResult, TableRowSelection} from "antd/es/table/interface";
import {TableBasicParams} from '@/types/common';
import React from "react";
import {PlusOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";

export interface BasicTableProps {
    columns: ColumnsType<any>;
    data: any;
    showPagination: boolean;
    delAll?: Function;
    updateData: Function;
    updateSelectKeys: Function;
    showAdd?: boolean;
    loading?: boolean;
    addText?: string;
    addRouterUrl?: string;
    delText?: string;
    showDel?: boolean;
    y?: number;
    showBox?: boolean;
    showAlert?: boolean;
    noStyle?: boolean;
    initData?: any;
}

const BasicTableView: React.FC<BasicTableProps> = forwardRef((props, ref) => {
    const {
        columns,
        loading,
        updateData,
        updateSelectKeys,
        data,
        y = 534,
        showPagination = true,
        showAlert = true,
        noStyle = false,
    } = props
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const showTotal: PaginationProps['showTotal'] = (total) => `共 ${total} 条记录`;
    const navigateTo = useNavigate();
    const [tableParams, setTableParams] = useState<TableBasicParams>({
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
            showQuickJumper: true,
showTotal: pageInfo.showTotal,
            showTotal
        },
    });

    // 处理table列表事件
    const handleTableChange = async (
        pagination: TablePaginationConfig,
        filters: Record<string, FilterValue>,
        sorter: SorterResult<any>
    ) => {
        pagination.showTotal = showTotal
        let resParams = {
            pagination,
            filters,
            orderField: sorter?.field,
            order: sorter?.order === 'ascend' ? "ASC" : "DESC",
        }
        if (tableParams.filters) resParams.filters = tableParams.filters
        await updateData(resParams);
    };

    useImperativeHandle(ref, () => ({
        // 更新pagination参数
        updatePageParams: async (params: TableBasicParams) => {
            console.log('text--------',params);
            
            let res = {...tableParams};
            res.pagination.current = params?.currPage;
            res.pagination.total = params?.totalCount;
            res.pagination.pageSize = params?.pageSize;
            if (params.filters) res.filters = params.filters;
            setTableParams(res);
        },
        // 重置复选框
        updateSelectReset: () => {
            setSelectedRowKeys([])
        },
    }))

    // 选中table行事件
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
        updateSelectKeys(newSelectedRowKeys)
    };

    const rowSelection: TableRowSelection<any> = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    return (
        <Fragment>
            {showAlert && <Alert
                className="MT10"
                message={
                    <p>
                        已选择 <span className="text-blue">{selectedRowKeys.length}</span>
                        项&nbsp;&nbsp;&nbsp;总共{tableParams.pagination.total}项{" "}
                        <span className="hand text-blue ML10" onClick={() => onSelectChange([])}>清空</span>
                    </p>
                }
                type="info"
                showIcon
            />}
            <Table
              rowSelection={{
                type: 'checkbox',
                ...rowSelection,
              }}
                className={noStyle ? '' : "MT10"}
                columns={columns}
                rowKey={(record) => record.id}
                dataSource={data}
                pagination={showPagination ? tableParams.pagination : false}
                loading={loading}
                // rowSelection={showBox ? rowSelection : false}
                onChange={handleTableChange}
                scroll={{y: y}}
            />
        </Fragment>
    );
});
export default BasicTableView;
